import { reqGetHospitalDetail } from '@/api/hospital/hospitalList';
import { ReqGetHospitalDetailResponse } from '@/api/hospital/hospitalList/model/hospitalListTypes';
import { Badge, Button, Card, Descriptions } from 'antd'
import React, {useEffect, useState} from 'react'
import { useNavigate, useParams } from 'react-router';

export default function HospitalShow() {
  //定义状态
  let [hospitalDetail, setHospitalDetail] = useState<ReqGetHospitalDetailResponse>();//遇到数据复杂的情况, 可以不设置初始值
  //获取医院的 id 参数
  let {id} = useParams();

  //useEffect  webstorm
  useEffect(() => {
    (async () => {
      //请求获取医院的详情数据
      let result = await reqGetHospitalDetail(id as string);
      //更新状态
      setHospitalDetail(result);
    })();
  }, []);

  //获取hospital属性的值
  let hospital = hospitalDetail?.hospital;
  let book = hospitalDetail?.bookingRule;
  //获取 navigate 函数
  let navigate = useNavigate();

  return (
    <Card>
      <Descriptions title="基本信息" bordered>
        <Descriptions.Item labelStyle={{width: 120}} label="医院名称">{hospital?.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院logo" span={2}><img src={'data:image/png;base64,' + hospital?.logoData} width="60" /></Descriptions.Item>
        <Descriptions.Item label="医院编码">{hospital?.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址" span={2}>{hospital?.param.fullAddress}</Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={3}>
          {hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={3}>
          {hospital?.intro}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期">{book?.cycle}</Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>{book?.releaseTime}</Descriptions.Item>
        <Descriptions.Item label="停挂时间">{book?.stopTime}</Descriptions.Item>
        <Descriptions.Item label="退号时间" span={2}>{book?.quitTime}</Descriptions.Item>
        <Descriptions.Item label="预约规则" span={3}>
          {book?.rule.map((item, index) => {
            return <div key={index}>{item}</div>
          })}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Button onClick={() => {
        navigate(-1);
      }}>返回</Button>
    </Card>
  )
}
